<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: #409eff;
  color: #333;
  line-height: 60px;
  text-align: center;
  color: #fff;
}
.el-row {
  margin-bottom: 20px;
}
.jsoneditor-poweredBy {
  display: none;
}
#jsoneditor {
  height: 500px;
  width: 100%;
}
</style>

<template>
  <el-container>
    <el-header>配置中心</el-header>
    <el-container :loading="isLoading">
      <el-aside width="220px">
        <el-menu @select="selectKey">
          <el-menu-item v-for="item in list" :key="item" :index="item">{{item}}</el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input type="text" placeholder="请输入配置项" v-model="configKey"></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="configEnv" @change="envChange" placeholder="请选择环境">
              <el-option v-for="env in envs" :key="env" :label="env" :value="env"></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select v-model="configMode" @change="modeChange" placeholder="请选择编辑模式">
              <el-option v-for="mode in modes" :key="mode" :label="mode" :value="mode"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <div id="jsoneditor"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="save" :disabled="!saveStatus">保存配置</el-button>
          <el-button type="danger" @click="remove" :disabled="!saveStatus">删除配置</el-button>
        </el-row>
      </el-main>
      <el-dialog title="用户登录" :visible.sync="dialogVisible" width="400px" :show-close="false" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="登录账号">
            <el-input v-model="form.account" @keyup.enter.native="handleLogin"></el-input>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input type="password" v-model="form.password" @keyup.enter.native="handleLogin"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin">立即登录</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </el-container>
</template>
<script>
import { list, config, save, remove, login } from '@/services'
import { isJson } from '@/utils'
export default {
  name: 'Home',
  data() {
    return {
      isLoading: false,
      dialogVisible: false,
      form: {
        account: '',
        password: ''
      },
      list: [],
      envs: ['default', 'dev', 'test', 'ready', 'prod'],
      modes: ['text', 'code', 'tree', 'view', 'form'],
      configMode: 'view',
      configEnv: 'default',
      configKey: '',
      config: '',
      editor: false
    }
  },
  created() {
    this.loadList()
  },
  mounted() {
    this.editor = new JSONEditor(document.getElementById('jsoneditor'), {
      mode: this.configMode,
      search: true,
      height: 500
    })
  },
  computed: {
    saveStatus() {
      return this.configKey && this.configKey.length > 1
    },
    deleteStatus() {
      return this.configKey && this.configKey.length > 1
    }
  },
  methods: {
    checkLogin(json) {
      if (json.message.indexOf('403') >= 0) this.dialogVisible = true
    },
    loadList() {
      list()
        .then(json => {
          this.list = json
        })
        .catch(this.checkLogin)
    },
    loadConfig() {
      config(this.configKey, this.configEnv)
        .then(json => {
          this.editor.set(json || {})
          if (
            this.configMode === 'tree' ||
            this.configMode === 'view' ||
            this.configMode === 'form'
          )
            this.editor.expandAll()
        })
        .catch(this.checkLogin)
    },
    selectKey(key) {
      this.configKey = key
      this.loadConfig()
    },
    envChange(env) {
      this.loadConfig()
    },
    modeChange() {
      this.editor.setMode(this.configMode)
    },
    save() {
      this.config = this.editor.getText()
      if (!isJson(this.config)) {
        this.$message({
          message: '配置信息必须为Json格式',
          type: 'warning'
        })
        return false
      }
      this.isLoading = true
      save(this.configKey, this.configEnv, this.config)
        .then(json => {
          if (json && json.ok) {
            this.$message({
              message: '配置文件保存成功',
              type: 'success'
            })
            this.loadList()
            this.isLoading = false
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    remove() {
      this.$confirm('此操作将删除该配置文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(this.configKey, this.configEnv).then(json => {
          if (json && json.ok) {
            this.$message({
              message: '配置文件删除成功',
              type: 'success'
            })
            this.loadList()
            this.loadConfig()
          }
        })
      })
    },
    handleLogin() {
      if (!this.form.account || !this.form.password) {
        this.$message({
          message: '请输入账号密码',
          type: 'error'
        })
        return false
      }
      login(this.form.account, this.form.password)
        .then(json => {
          location.reload(true)
        })
        .catch(json => {
          this.$message({
            message: json.message,
            type: 'error'
          })
        })
    },
    handleClose() {
      return false
    }
  }
}
</script>

